<%--
  Created by IntelliJ IDEA.
  User: 一念
  Date: 2021/7/28
  Time: 9:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
 <title>员工列表</title>
 <%
  pageContext.setAttribute("APP_PATH",request.getContextPath());
 %>
 <script type="text/javascript" src="${APP_PATH}/statis/js/jquery-1.12.4.min.js"></script>
 <link href="${APP_PATH}/statis/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet" />
 <script src="${APP_PATH}/statis/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>

<body>

<%--员工编辑的模态框--%>
<<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
 <div class="modal-dialog" role="document">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" >员工修改</h4>
   </div>
   <div class="modal-body">
    <form class="form-horizontal">
     <div class="form-group">
      <label class="col-sm-2 control-label">empName</label>
      <div class="col-sm-10">
       <p class="form-control-static" id="empName_update_static"></p>
       <span class="help-block"></span>
      </div>
     </div>
     <div class="form-group">
      <label class="col-sm-2 control-label">email</label>
      <div class="col-sm-10">
       <input type="text" name="email" class="form-control" id="email_update_input" placeholder="email@atguigu.com">
       <span class="help-block"></span>
      </div>
     </div>
     <div class="form-group">
      <label class="col-sm-2 control-label">gender</label>
      <div class="col-sm-10">
       <label class="radio-inline">
        <input type="radio" name="gender" id="gender1_update_input" value="M" checked="checked"> 男
       </label>
       <label class="radio-inline">
        <input type="radio" name="gender" id="gender2_update_input" value="F"> 女
       </label>
      </div>
     </div>
     <div class="form-group">
      <label class="col-sm-2 control-label">deptName</label>
      <div class="col-sm-4">
       <!-- 部门提交部门id即可 -->
       <select class="form-control" name="dId">
       </select>
      </div>
     </div>
    </form>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
    <button type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
   </div>
  </div>
 </div>
</div>


<%--模态框内的填写信息--%>
<<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
 <div class="modal-dialog" role="document">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">员工添加</h4>
   </div>
   <div class="modal-body">
    <form class="form-horizontal">
     <div class="form-group">
      <label class="col-sm-2 control-label">empName</label>
      <div class="col-sm-10">
       <input type="text" name="empName" class="form-control" id="empName_add_input" placeholder="empName">
       <span class="help-block"></span>
      </div>
     </div>
     <div class="form-group">
      <label class="col-sm-2 control-label">email</label>
      <div class="col-sm-10">
       <input type="text" name="email" class="form-control" id="email_add_input" placeholder="email@atguigu.com">
       <span class="help-block"></span>
      </div>
     </div>
     <div class="form-group">
      <label class="col-sm-2 control-label">gender</label>
      <div class="col-sm-10">
       <label class="radio-inline">
        <input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked"> 男
       </label>
       <label class="radio-inline">
        <input type="radio" name="gender" id="gender2_add_input" value="F"> 女
       </label>
      </div>
     </div>
     <div class="form-group">
      <label class="col-sm-2 control-label">deptName</label>
      <div class="col-sm-4">
       <!-- 部门提交部门id即可 -->
       <select class="form-control" name="dId">
       </select>
      </div>
     </div>
    </form>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
    <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
   </div>
  </div>
 </div>
</div>

<div class="container">
 <%--        标题--%>
 <div class="row">
  <div class="col-md-12">
   <h1>SSM-CRUD</h1>
  </div>
 </div>
 <%--    按钮--%>
 <div class="row">
  <div class="col-md-offset-8">
   <button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
   <!-- Modal -->
   <button class="btn btn-danger" id="emp_delete_all_btn">删除</button>
  </div>
 </div>
 <%--    表格--%>
 <div class="row">
  <div class="col-md-12">
   <table class="table table-hover" id="emps_table">
    <thead>
     <tr>
      <th>
        <input type="checkbox" id="check_all">
      </th>
      <th>#</th>
      <th>empName</th>
      <th>gender</th>
      <th>email</th>
      <th>deptName</th>
      <th>操作</th>
     </tr>
    </thead>
   </table>
  </div>
 </div>
 <%--    分页信息--%>
  <!-- 显示分页信息 -->
  <div class="row">
   <!--分页文字信息  -->
   <div class="col-md-6" id="page_info_area"></div>
   <!-- 分页条信息 -->
   <div class=".col-md-6 .col-md-offset-3" id="page_nav_area">
   </div>
  </div>

</div>
</div>

<script type="text/javascript" >

 var totalRecor,currentPage;

 $(function (){
  to_page(1);
 })

 function to_page(pn){
  $.ajax({
   url:"${APP_PATH}/emps",
   data:"pn="+pn,
   type:"get",
   success:function (result){
    // console.log(result)
    build_emps_table(result);

    build_page_info(result);

    build_page_nav(result);
   }
  });
 }

 // 清空表单内容及样式
 function reset_form(ele){
  $(ele)[0].reset();
  $(ele).find("*").removeClass("has-error has-success");
  $(ele).find(".help-block").text("");
 }

//点击添加员工的模态框，弹出功能的点击事件
 $("#emp_add_modal_btn").click(function (){
  reset_form("#empAddModal form");
  $("#empAddModal form")[0].reset();
  //发送Ajax请求，查出部门信息
  getDepts("#empAddModal select");
  //弹出模态框
  $('#empAddModal').modal({
   backdrop:"static"
  });
 })

 function validate_add_form(){
   //拿到要校验的数据,使用正则
  var empName = $("#empName_add_input").val();
  var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
  if (!regName.test(empName)){
     //alert("用户名可以是2-5位中文或者6-16位英文和数字的组合");
   show_validate_msg("#empName_add_input","error","用户名可以是2-5位中文或者6-16位英文和数字的组合");
     return false;
  }else {
     show_validate_msg("#empName_add_input","success","")
  }
  //校验邮箱信息
  var  email = $("#email_add_input").val();
  var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
  if(!regEmail.test(email)){
     //alert("邮箱格式不正确");
   //应该清空之前的样式
   show_validate_msg("#email_add_input","error","邮箱格式不正确")
     return false;
  }else {
   show_validate_msg("#email_add_input","success","")
  }
  return true;
 }

 //前端数据验证
 function  show_validate_msg(ele,status,msg){
  //清楚当前元素校验状态
  $(ele).parent().removeClass("has-success has-error");
  $(ele).next("span").text("");
    if ("success" == status){
     $(ele).parent().addClass("has-success");
     $(ele).next("span").text(msg);

    }else if ("error" == status){
     $(ele).parent().addClass("has-error");
     $(ele).next("span").text(msg);
    }
 }

 //点击新增加按钮中的保存按键事件
 $("#emp_save_btn").click(function (){
  //先对需要提交给服务器的数据进行校验
  if (!validate_add_form()){
    return false;
  }
  if ($(this).attr("ajax-va")=="erroe"){
      return false;
  }
   // alert($("#empAddModal form").serialize())
    $.ajax({
     url:"${APP_PATH}/emp",
     type:"post",
     data: $("#empAddModal form").serialize(),
     success:function(result){
       //alert(result.msg);
      //员工保存成功后
      //关闭模态框
      $("#empAddModal").modal('hide');
      //来到最后一页，显示刚刚加入的用户
      to_page(totalRecord);
     }
    }
    )
 })

 function getDepts(ele){
  $(ele).empty();
   $.ajax({
    url:"${APP_PATH}/depts",
    type:"get",
    success:function (result){
        // console.log(result);
     //显示部门信息在下拉列表中
     // $("#dept_add_select").append("")
     $.each(result.extend.depts,function (){
       var  optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
       optionEle.appendTo(ele)
     })
    }
   })
 }

 //检验用户名是否可用
 $("#empName_add_input").change(function (){
  var empName = this.value;
     $.ajax({
         url:"${APP_PATH}/checkuser",
         data:"empName="+empName,
         type:"post",
         success:function (result){
             if (result.code == 100){
                 show_validate_msg("#empName_add_input","success","用户名可用");
                 $("#emp_save_btn").attr("ajax-va","success");
             }else {
                 show_validate_msg("#empName_add_input","error","用户名不可用");
                 $("#emp_save_btn").attr("ajax-va","error");
             }
         }
     })
 })

 //1、我们是按钮创建之前就绑定了click，所以绑定不上。
 //1）、可以在创建按钮的时候绑定。    2）、绑定点击.live()
 //jquery新版没有live，使用on进行替代
 $(document).on("click",".edit_btn",function(){
  //alert("edit");

  //1、查出部门信息，并显示部门列表
  getDepts("#empUpdateModal select");
  //2、查出员工信息，显示员工信息
  getEmp($(this).attr("edit-id"));

  //3、把员工的id传递给模态框的更新按钮
  $("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));
  $("#empUpdateModal").modal({
   backdrop:"static"
  });
 });

 //获取员工信息
 function getEmp(id){
  $.ajax({
     url:"${APP_PATH}/emp/"+id,
     type:"get",
     success:function (result){
        //console.log(result)
      var empDate = result.extend.emp;
      $("#empName_update_static").text(empDate.empName);
      $("#email_update_input").val(empDate.email);
      $("#empUpdateModal input[name=gender]").val([empDate.gender]);
      $("#empUpdateModal select").val([empDate.dId]);
     }
  })
 }

 //点击更新，更新员工信息
 $("#emp_update_btn").click(function(){
  //验证邮箱是否合法
  //1、校验邮箱信息
  var email = $("#email_update_input").val();
  var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
  if(!regEmail.test(email)){
   show_validate_msg("#email_update_input", "error", "邮箱格式不正确");
   return false;
  }else{
   show_validate_msg("#email_update_input", "success", "");
  }

  //2、发送ajax请求保存更新的员工数据
  $.ajax({
   url:"${APP_PATH}/emp/"+$(this).attr("edit-id"),
   type:"PUT",
   data:$("#empUpdateModal form").serialize(),
   success:function(result){
    // alert(result.msg);
    //1、关闭对话框
    $("#empUpdateModal").modal("hide");
    //2、回到本页面
    to_page(currentPage);
   }
  });
 });




  <%-- 获取后端发送的json数据，解析并在页面上显示--%>
 <%--  $(function (){--%>
 <%--    $.ajax({--%>
 <%--     url:"${APP_PATH}/emps",--%>
 <%--     data:"pn=1",--%>
 <%--     type:"get",--%>
 <%--     success:function (result){--%>
 <%--        // console.log(result)--%>
 <%--      build_emps_table(result);--%>

 <%--      build_page_info(result);--%>

 <%--      build_page_nav(result);--%>
 <%--     }--%>
 <%--    });--%>
 <%--  });--%>
 //单个删除
$(document).on("click",".delete_btn",function (){
    //弹出删除对话框
    var empName = $(this).parents("tr").find("td:eq(2)").text();
    var empId = $(this).attr("del-id");
    if (confirm("确认删除【"+empName+"】")){
        $.ajax({
            url:"${APP_PATH}/emp/"+empId,
            type:"delete",
            success:function (result){
               alert(result.msg);
               to_page(currentPage);
            }
        })
    }
})

 //完成全选/全不选功能
 $("#check_all").click(function (){
  //prop修改和读取dom原生属性的值
  $(".check_item").prop("checked",$(this).prop("checked"));
 });

//单击选择
 $(document).on("click",".check_item",function (){
   var flag = $(".check_item:checked").length==$(".check_item").length;
   $("#check_all").prop("checked",flag);
 })

 //点击全部删除，就批量删除
 $("#emp_delete_all_btn").click(function(){
  //
  var empNames = "";
  var del_idstr = "";
  $.each($(".check_item:checked"),function(){
   //this
   empNames += $(this).parents("tr").find("td:eq(2)").text()+",";
   //组装员工id字符串
   del_idstr += $(this).parents("tr").find("td:eq(1)").text()+"-";
  });
  //去除empNames多余的,
  empNames = empNames.substring(0, empNames.length-1);
  //去除删除的id多余的-
  del_idstr = del_idstr.substring(0, del_idstr.length-1);
  if(confirm("确认删除【"+empNames+"】吗？")){
   //发送ajax请求删除
   $.ajax({
    url:"${APP_PATH}/emp/"+del_idstr,
    type:"DELETE",
    success:function(result){
     alert(result.msg);
     //回到当前页面
     to_page(currentPage);
    }
   });
  }
 });



 //获取pageInfo中的emp用户数据，并在表格上显示
 function build_emps_table(result){
  //清空talbel表格
  $("#emps_table tbody").empty();

  var emps = result.extend.pageInfo.list;
  $.each(emps,function (index,item){
   var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
   var empIdTd = $("<td></td>").append(item.empId);
   var empNameTd = $("<td></td>").append(item.empName);
   var genderTd = $("<td></td>").append(item.gender == 'M'?"男":"女");
   var emailTd = $("<td></td>").append(item.email);
   var deptNameTd = $("<td></td>").append(item.department.deptName);
   var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
           editBtn.attr("edit-id",item.empId)
           .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
   var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
            delBtn.attr("del-id",item.empId)
           .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
   var btn = $("<td></td>").append(editBtn).append(" ").append(delBtn);
   $("<tr></tr>").append(checkBoxTd)
           .append(empIdTd)
           .append(empNameTd)
           .append(genderTd)
           .append(emailTd)
           .append(deptNameTd)
           .append(btn)
           .appendTo("#emps_table")
  });
 }
 //解析显示分页信息
 function build_page_info(result){
  $("#page_info_area").empty();
  $("#page_info_area").append("当前"+result.extend.pageInfo.pageNum+"页，" +
          "总"+result.extend.pageInfo.pages+"页，总" +
          +result.extend.pageInfo.total+"条记录")
  totalRecord = result.extend.pageInfo.total;
  currentPage = result.extend.pageInfo.pageNum;
 }

 //解析显示分页条
 function build_page_nav(result){
  $("#page_nav_area").empty();
  var ul = $("<ul></ul>").addClass("pagination");

  var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
  var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
  if (result.extend.pageInfo.hasPreviousPage == false){
   firstPageLi.addClass("disabled");
   prePageLi.addClass("disabled");
  }else {
   firstPageLi.click(function (){
    to_page(1);
   })
   prePageLi.click(function (){
    to_page(result.extend.pageInfo.pageNum - 1);
   })
  }

  var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
  var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
  if (result.extend.pageInfo.hasNextPage == false){
   nextPageLi.addClass("disabled");
   lastPageLi.addClass("disabled");
  }else {
   nextPageLi.click(function (){
    to_page(result.extend.pageInfo.pageNum + 1);
   })
   lastPageLi.click(function (){
    to_page(result.extend.pageInfo.pages);
   })
  }


  ul.append(firstPageLi).append(prePageLi);

  $.each(result.extend.pageInfo.navigatepageNums,function(index,item){
   var numLi = $("<li></li>").append($("<a></a>").append(item));
   if (result.extend.pageInfo.pageNum == item){
    numLi.addClass("active");
   }
   numLi.click(function (){
    to_page(item)
   })
   ul.append(numLi);
  })
  ul.append(nextPageLi).append(lastPageLi);

  var navEle = $("<nav></nav>").append(ul);
  navEle.appendTo("#page_info_area")
 }


</script>

</body>
</html>
